import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  strict: true,
  state: {
    list: [
      { id: 1, name: '打王者荣耀', flag: true },
      { id: 2, name: '刷抖音', flag: false },
      { id: 3, name: '吃鸡', flag: true },
      { id: 4, name: '撩妹', flag: false }
    ],
    showList: []
  },
  mutations: {
    addTodo (state, name) {
      state.list.unshift({
        id: +new Date(),
        name,
        flag: false
      })
    },
    delTodo (state, id) {
      state.list = state.list.filter(item => item.id !== id)
      state.showList = state.list
    },
    editTodo (state, { id, value }) {
      state.list.find(item => item.id === id).name = value
    },
    changeState (state, id) {
      const todo = state.list.find(item => item.id === id)
      todo.flag = !todo.flag
    },
    change (state, type) {
      state.showList = []
      switch (type) {
        case 'all':
          state.showList = state.list
          break
        case 'active':
          state.showList = state.list.filter(item => !item.flag)
          break
        case 'completed':
          state.showList = state.list.filter(item => item.flag)
          break
        default:
          break
      }
    },
    clearComplated (state) {
      state.list = state.list.filter(item => !item.flag)
      state.showList = state.list
    },
    toggleChecked (state, value) {
      state.list.forEach(item => {
        item.flag = value
      })
    }
  },
  getters: {
    unfinishCount (state) {
      return state.list.filter(item => !item.flag).length
    },
    isShowFooter (state) {
      return state.list.length
    },
    isShowClearComplated (state) {
      return state.list.some(item => item.flag)
    },
    isCheckedAll (state) {
      return state.list.every(item => item.flag)
    }
  },
  actions: {
  },
  modules: {
  }
})
